<template>
  <div class="feature-card">
    <div class="feature-header">
      <h5>{{ title }}</h5>
      <i class="el-icon-s-flag"></i>
    </div>
    <ul>
      <li v-for="(feature, index) in features" :key="index">
        <span class="feature-index">{{ index + 1 }}.</span>
        {{ feature }}
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  features: Array
})
</script>

<style scoped>
.feature-card {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.feature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.feature-header h5 {
  font-size: 1.2rem;
  color: #409eff;
  margin: 0;
}

.feature-header i {
  font-size: 1.5rem;
  color: #ff9800;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  padding: 0.7rem 0;
  font-size: 1rem;
  color: #555;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px dashed #eee;
}

li:last-child {
  border-bottom: none;
}

.feature-index {
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
  background: #409eff;
  color: white;
  border-radius: 50%;
  margin-right: 1rem;
  flex-shrink: 0;
}
</style>
<!--&lt;!&ndash; IdentityFeatureCard.vue &ndash;&gt;-->
<!--<template>-->
<!--  <div class="feature-card">-->
<!--    <div class="feature-header">-->
<!--      <h5>{{ title }}</h5>-->
<!--    </div>-->
<!--    <ul>-->
<!--      <li v-for="(feature, index) in features" :key="index">-->
<!--        <i class="el-icon-check"></i> {{ feature }}-->
<!--      </li>-->
<!--    </ul>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--defineProps({-->
<!--  title: String,-->
<!--  features: Array-->
<!--})-->
<!--</script>-->

<!--<style scoped>-->
<!--.feature-card {-->
<!--  background: #fff;-->
<!--  border-radius: 8px;-->
<!--  padding: 20px;-->
<!--  margin: 15px 0;-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);-->
<!--  transition: transform 0.3s;-->
<!--}-->

<!--.feature-card:hover {-->
<!--  transform: translateY(-5px);-->
<!--}-->

<!--.feature-header {-->
<!--  border-bottom: 1px solid #eee;-->
<!--  padding-bottom: 10px;-->
<!--  margin-bottom: 15px;-->
<!--}-->

<!--.feature-header h5 {-->
<!--  font-size: 16px;-->
<!--  color: #409eff;-->
<!--  margin: 0;-->
<!--}-->

<!--ul {-->
<!--  padding-left: 20px;-->
<!--  margin: 0;-->
<!--}-->

<!--li {-->
<!--  margin-bottom: 10px;-->
<!--  font-size: 14px;-->
<!--  color: #555;-->
<!--  display: flex;-->
<!--  align-items: flex-start;-->
<!--}-->

<!--.el-icon-check {-->
<!--  color: #67c23a;-->
<!--  margin-right: 8px;-->
<!--  margin-top: 3px;-->
<!--}-->
<!--</style>-->